<!--圆形统计-->
<import type='css' file="css.jquery-circliful" />

<import type="js" file="js.jquery-c-min" />
<import  type="js" file="js.jquery-circliful-min" />
<import type="js" file="js.jquery-circliful" />
<!--kendo-->
<import type='css' file="css.kendo.examples-offline" />
<import type='css' file="css.kendo.kendo-common-min" />
<import type='css' file="css.kendo.kendo-default-min" />
<import type='css' file="css.kendo.kendo-dataviz-min" />
<import type='css' file="css.kendo.kendo-dataviz-default-min" />
<!--<import type="js" file="js.kendo.jquery-min" />-->
<import  type="js" file="js.kendo.kendo-dataviz-min" />
<import type="js" file="js.kendo.console" />


<!--圆形统计-->
<script type="text/javascript">
    $( document ).ready(function(){

        $('#email').circliful();

        $('#power').circliful();

        $('#msg').circliful();

        $('#yuyue').circliful();
    });
</script>

<script>
    //充电次数
    var stats = new Array();
    var charge = "charge";
    $.ajax({
        type:"post",
        url:'__URL__/chart',
        data:'type='+charge,
        dataType:"json",
        async:false,
        success:function(data){
            $.each(data, function (n, va) {
                stats[n]  ={ value: va.total, date: new Date(va.currentTime) };
            });
            return stats;
        }});
    //预约次数
    var stats_center = new Array();
    var bespeak = "bespeak";
    $.ajax({
        type:"post",
        url:'__URL__/chart',
        data:'type='+bespeak,
        dataType:"json",
        async:false,
        success:function(data){
            $.each(data, function (n, va) {
                stats_center[n]  ={ value: va.total, date: new Date(va.currentTime) };
            });
            return stats_center;
        }});
    //碳排放
    var stats_right = new Array();
    var carbon = "carbon";
    $.ajax({
        type:"post",
        url:'__URL__/chart',
        data:'type='+carbon,
        dataType:"json",
        async:false,
        success:function(data){
            $.each(data, function (n, va) {
                stats_right[n]  ={ value: va.carbon, date: new Date(va.currentTime) };
            });
            return stats_right;
        }});

    function createChart() {
        $("#chart").kendoChart({
            title: {
                text: ""
            },
            dataSource: {
                data: stats

            },

            series: [{
                type: "line",
                aggregate: "avg",
                field: "value",
                categoryField: "date"
            }],
            //使用 年月日
            categoryAxis: {
                baseUnit: "days"
            }
        });

    }
    //        中间
    function createChart_center() {
        $("#chart_center").kendoChart({
            title: {
                text: ""
            },
            dataSource: {
                data: stats_right

            },

            series: [{
                type: "line",
                aggregate: "avg",
                field: "value",
                categoryField: "date"
            }],
            //使用 年月日
            categoryAxis: {
                baseUnit: "days"
            }
        });
    }

    //        右边
    function createChart_right() {
        $("#chart_right").kendoChart({
            title: {
                text: ""
            },
            dataSource: {
                data: stats_right

            },

            series: [{
                type: "line",
                aggregate: "avg",
                field: "value",
                categoryField: "date"
            }],
            //使用 年月日
            categoryAxis: {
                baseUnit: "days"
            }
        });
    }

    $(document).ready(createChart);
    $(document).ready(createChart_center);
    $(document).ready(createChart_right);

</script>
<style scoped>
    .chart-wrapper, .chart-wrapper .k-chart {
        width: 600px;
        height: 300px;
    }
</style>
<!--kendo-->


<ol class="breadcrumb">
    <li> <i class="fa fa-anchor"></i>
        &nbsp;{:C('MANUFACTURER')}
    </li>
    <li>首页</li>
</ol>
<!--  location end -->
<div class="indexTitle mt10">电桩实时状态总览 | <span class="sTitle">全国</span></div>
<ul class="indexIconsBg">
    <a href={:U('State/index',array('charge'=>1))}>
        <li>
            <div class="iconBox in_icon2"></div>
            <div class="icon_con">
                <div class="enTitle">CHARGE</div>
                <div class="cnTitle c_charge">{$charge}</div>
            </div>
            <!--<div class="numb">2234421</div>-->
            <div class="numberBox icon_2_2"></div>

        </li>
    </a>
    <div class="iconFg"></div>
    <a href={:U('State/index',array('charge'=>0))}>
        <li>
            <div class="iconBox in_icon3"></div>
            <div class="icon_con">
                <div class="enTitle">RELEASE</div>
                <div class="cnTitle c_online">{$release}</div>
            </div>
            <!--<div class="numb">2234421</div>-->
            <div class="numberBox icon_2_3"></div>

        </li>
    </a>
    <div class="iconFg"></div>
    <a href={:U('State/index',array('error'=>1))}>
        <li>
            <div class="iconBox in_icon1"></div>
            <div class="icon_con">
                <div class="enTitle">OFFLINE</div>
                <div class="cnTitle c_offline">{$error}</div>
            </div>
            <!--<div class="numb">2234421</div>-->
            <div class="numberBox icon_2_1"></div>

        </li>
    </a>
    <div class="iconFg"></div>
    <a href={:U('State/index')}>
        <li>
            <div class="iconBox in_icon4"></div>
            <div class="icon_con">
                <div class="enTitle">ALL</div>
                <div class="cnTitle c_error">{$charAll}</div>
            </div>
            <!--<div class="numb">2234421</div>-->
            <div class="numberBox icon_2_4"></div>

        </li>
    </a>
</ul>

<div id="CB"></div>

<!--  ev char state & station  end-->

<div class="w30per">
    <div class="indexTitle mt30">成功预约/次/日 | <span class="sTitle">全国</span><span class="sTitle" style="margin-left:20px">预约总数：&nbsp;{$sumBespeak}次</span></div>
    <!--坐标系效果 左边-->

    <div id="example_right" class="k-content">
        <div class="chart-wrapper" >
            <div id="chart_center"  style="margin-left: 20px;width: 60%"></div>
        </div>
    </div>
</div>

<div class="w30per">
    <div class="indexTitle mt30">成功充电/次/日 | <span class="sTitle">全国</span><span class="sTitle" style="margin-left:20px">充电总数：&nbsp;{$sumCharge}次</span></div>
    <!--坐标系效果 中间-->
    <div id="example" class="k-content">
        <div class="chart-wrapper">
            <div id="chart" style="margin-left: 20px;width:60%;"></div>
        </div>
    </div>

</div>

<div class="w30per">
    <div class="indexTitle mt30">减少碳排放/千克/日 | <span class="sTitle">全国</span><span class="sTitle" style="margin-left:20px">减少碳排放：&nbsp;{$sumCarbon}千克</span></div>
    <!--坐标系效果 右边-->

    <div id="example_right" class="k-content">
        <div class="chart-wrapper" >
            <div id="chart_right"  style="margin-left: 20px;width: 60%"></div>
        </div>
    </div>
</div>

<div style="margin-top:420px;"></div>

<!--<div align="center">-->
<!--<img src="__PUBLIC__/img/2.png" width="95%" alt="tongji" style="margin-bottom:30px;" /></div>-->
